<template>
  <div class="planning_list_wrapper" v-loading="planLoading">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input
          clearable
          v-model="searchForm.name"
          placeholder="名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="searchForm.category" placeholder="类型" clearable>
          <el-option label="柜机" value="柜机"></el-option>
          <el-option label="挂机" value="挂机"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="searchForm.createDate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <!-- <el-form-item label="状态">
          <el-select v-model="searchForm.state" placeholder="状态">
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="已关闭" value="已关闭"></el-option>
          </el-select>
        </el-form-item> -->
        <el-button type="primary" @click="searchSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="planListWrapper">
      <el-row :gutter="10" class="list_row" v-if="planList.length > 0">
        <div v-for="plan in planList" :key="plan.name">
          <el-col :lg="8" :md="12" class="list_col">
            <el-card class="list_item">
              <div class="item_pic" v-if="plan.pictureList.length > 0">
                <img :src="showPic(plan.pictureList[0].path)" />
              </div>
              <div v-else class="item_pic">
                <el-empty description="暂无外观图片"></el-empty>
              </div>
              <div class="item_body">
                <div class="item_detail">
                  <div class="item_title">
                    <span class="info_name">{{ plan.name }}</span>
                    <!-- <span class="info_name">系列：{{plan.seriesName}}</span> -->
                  </div>
                  <div class="item_description">
                    <span class="info_brand">{{ plan.brand }}</span>
                    <span class="info_brand">{{ plan.seriesName }}</span>
                    <span class="info_type">{{ plan.category }}</span>
                  </div>
                </div>

                <div class="item_time">
                  <span class="info_time"
                    >{{ parseDate(plan.createDate) }}
                  </span>
                  <span class="info_detail"
                    ><el-link type="primary" @click="detail(plan.id)"
                      >详情</el-link
                    ></span
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </div>
      </el-row>
      <el-row v-else>
        <el-empty class="emptyPlan" :image-size="200" description="暂无数据"></el-empty>
      </el-row>
    </div>

    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="6"
        layout="prev, pager, next, total"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { postRequest } from "@/api/api";
import { SelectData } from "@/mixins/select-data.js";
import { base } from "@/api/api";
export default {
  name: "PlanningList",
  mixins: [SelectData],
  created() {
    console.log("created");
    // this.planLoading = true;
    let createId = store.getters.loginUser.data.id;
    this.searchForm.createId = createId;
    postRequest("/workBeach/plan", this.searchForm).then((res) => {
      this.planList = res.data.data.records;
      this.total = res.data.data.totalCount;
      console.log(this.total);
      this.planLoading = false;
    });
  },
  mounted() {
    // this.planLoading = false;
  },
  activated() {
    this.planLoading = true;
    this.loadPlanByMe(this.searchForm);
    this.planLoading = false;
  },
  data() {
    return {
      planLoading: true,
      total: -1,
      planList: [],
      currentPage: 1,
      searchForm: {
        name: "",
        createDate: "",
        createId: "",
        category: "",
        pageSize: "6",
        currentPage: "1",
      },
    };
  },
  methods: {
    detail(id) {
      console.log(id);
      this.$router.push({ path: "planning_detail/" + id });
    },
    showPic(path) {
      return base + path;
    },
    loadPlanByMe(params) {
      postRequest("/workBeach/plan", params)
        .then((res) => {
          this.planList = res.data.data.records;
          this.total = res.data.data.totalCount;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    searchSubmit() {
      this.planLoading = true;
      this.loadPlanByMe(this.searchForm);
      this.planLoading = false;
    },
    handleCurrentChange(val) {
      this.planLoading = true;
      console.log(`当前页: ${val}`);
      this.searchForm.currentPage = val;
      let params = this.searchForm;
      this.loadPlanByMe(params);
      this.planLoading = false;
    },
  },
};
</script>
<style scoped>
.el-empty {
  height: 200px;
}
.planListWrapper {
  min-height: 700px;
}
.list_item {
  margin-bottom: 16px;
}
.list_item >>> .el-card__body {
  padding: 0;
}
.item_pic {
  height: 250px;
}
.item_pic img {
  width: 100%;
  height: 100%;
}
.emptyPlan{
  height: 700px;
}
.item_body {
  padding: 24px;
  height: 80px;
}
.item_title,
.item_description {
  text-align: left;
  margin-bottom: 4px;
}
.item_time {
  margin-top: 16px;
  text-align: left;
  color: gray;
  font-size: 12px;
}
.item_time .info_detail {
  float: right;
}
.info_name {
  font-size: 16px;
  font-weight: 500;
}
.info_brand,
.info_type {
  font-size: 14px;
  color: gray;
}
</style>